<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>加载中.... ....</title>
  <link rel="shortcut icon" href="img/logo.ico" type="image/x-icon" />
          <style>
   .loader,
.loader:before,
.loader:after {
  background: rgb(0, 255, 255);
  -webkit-animation: load1 2s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1.6em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: "";
}
.loader:before {
  left: -2.5em;
}
.loader {
  text-indent: -9999em;
  margin: 40% auto;
  position: relative;
  font-size: 12px;
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.loader:after {
  left: 2.5em;
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 rgb(0, 255, 255);
    height: 6em;
  }
  40% {
    box-shadow: 0 -2em rgb(0, 255, 255);
    height: 6em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 rgb(0, 255, 255);
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em rgb(0, 255, 255);
    height: 5em;
  }
}

#load {
    width: 1350px;
    height: 200px;
}
#load h1 {
  text-align: center;
  padding: 7em 0 0 0;
  font-size: 56px;
  color: rgb(59, 177, 112);
}
#ld {
    width: 1200px;
    height: 200px;
  margin: -26em 0 0 6em;
}
* {
  margin: 0 auto;
}

    </style>
  </head>
  <body onlad="lod()">
    <div id="load">
      <h1>我会在这里分享一些学习笔记以及我发现的有趣的技术</h1>
      <div id="ld"><div class="loader">加载中 ........</div></div>
    </div>

    <script>
      setTimeout("location.href='Learning log.html';", 3000);
    </script>
  </body>
</html>
